<template>
	<view class="zone">
		<Header title=""></Header>
		<view class="main">
			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == 1 && stat == item.id?'active1':stat == 2 && stat == item.id?'active2':stat == 3 && stat == item.id?'active3':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

			<view class="list" v-if="stat == 1">
				<view class="box">
					<p>林场是自己的潮玩熊猫挖水晶的地方，购买更多的熊猫潮卡能提高挖水晶速度。</p>
					<view class="title">自己的潮玩熊猫</view>
					<p>自己的潮玩熊猫会自动进入挖水晶1队开始挖水晶，派遣去水晶林场进行挖水晶。</p>
					<view class="title">寻找新林场</view>
					<p>林场挖掘完毕，潮玩大冒险需要出发寻找新的林场，找到新林场后可重新开启挖水晶。</p>
					<view class="title">林场升级</view>
					<p>林场挖出的水晶数量越多，升级进度越快 <br>
					每升1级，林场水晶产量提高1%，寻找新林场的时长可缩短，恢复挖水晶效率。</p>
				</view>

				<view class="box mart15">
					<view class="title">购买熊猫潮卡挖水晶速度</view>
					<p>熊猫潮卡越多，林场预估每日可挖出的水晶越多</p>

					<view class="flexbw">
						<text>林场挖水晶卡数</text>
						<text>预估每日可挖出水晶</text>
					</view>
					<view class="numbox" v-for="(item , index) in list" :key="index">
						<text>{{item.num1}}</text>
						<text>
							<image src="http://img.cpgm.cc/panda/static/forest/sj.png" mode="widthFix" />
							{{item.num}}
						</text>
					</view>
				</view>
			</view>

			<view class="list" v-if="stat == 2">
				<view class="box">
					<p>挖水晶1队是自己和好友组队挖水晶的进阶玩法，分享组队的邀请海报，好友扫码后会跟你绑定组队关系。</p>
					<view class="title">好友挖水晶</view>
					<p>好友购买熊猫潮卡后可持续在挖水晶1队挖水晶，正在挖水晶的好友越多，1队的挖水晶速度越快。</p>
					<p class="zhu mart10">注: 新用户好友加入可免费挖水晶30天。</p>
				</view>
			</view>

			<view class="list" v-if="stat == 3">
				<view class="box">
					<p>挖水晶2-10队是好友组队挖水晶的高阶玩法，开启后好友邀请的好友都能进入林场水晶。</p>
					<view class="title">开启条件</view>
					<p>挖水晶1队为我挖到足够多的水晶，可开启挖水晶2-4队 <br>
					挖水晶1队邀请足够多的好友，可开启挖水晶5-10队</p>
					<view class="title">考核条件</view>
					<p>在考核期内，挖水晶1队为我挖到足够多的水晶或新增足够数量的有效好友，才可通过考核，继续获得高阶团队水晶奖励。</p>
					<p>若团队考核未通过，则停止获得奖励，直至重新通过考核。</p>
				</view>
			</view>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '初阶介绍'
					},
					{
						id: 2,
						name: '进阶林场'
					},
					{
						id: 3,
						name: '高阶林场'
					},
				],
				stat: 1,

				list:[
					{
						num1:'1张',
						num:'0.16',
					},
					{
						num1:'3张',
						num:'0.48',
					},
					{
						num1:'5张',
						num:'0.80',
					},
					{
						num1:'7张',
						num:'1.12',
					},
					{
						num1:'10张',
						num:'1.27',
					},
					{
						num1:'20张',
						num:'1.77',
					},
					{
						num1:'50张',
						num:'3.27',
					},
					{
						num1:'100张',
						num:'5.77',
					},

				]
			};
		},
		methods: {
			// 我的背包切换
			tabchange(id) {
				this.stat = id
			},
		}
	}
</script>

<style lang="less">

.zone {
	background: linear-gradient(180deg, #DBB87E 0%, #E9DBB3 100%);
	min-height: 100vh;
}

.main {
	padding: 10px;
}


	// tab导航
.tab {
	width: 100%;
	display: flex;
	align-items: center;
	background: #FFFFFF linear-gradient(180deg, #2F3034 0%, #4B4E53 100%);
	box-shadow: 0px 4px 10px 0px rgba(186,145,86,0.5), inset 0px -2px 0px 0px #6C717B;
	border-radius: 35px 10px 30px 10px;
	padding: 8px;
	overflow: hidden;
	margin: 10px auto;

	view {
		width: 50%;
		height: 42px;
		text-align: center;
		line-height: 42px;
		color: #fff;
		font-size: 13px;
		font-weight: 600;
		border-radius: 7px;
	}
}
.active1 {
	color: #000000 !important;
	background: linear-gradient(180deg, #DBB87E 0%, #E1D1A5 100%) !important;
	box-shadow: inset 0px -2px 0px 0px #F9F1DA !important;
	border-radius: 30px 6px 6px 6px !important;
}
.active2 {
	color: #000000 !important;
	background: linear-gradient(180deg, #DBB87E 0%, #E1D1A5 100%) !important;
	box-shadow: inset 0px -2px 0px 0px #F9F1DA !important;
	border-radius: 6px 6px !important;
}

.active3 {
	color: #000000 !important;
	background: linear-gradient(180deg, #DBB87E 0%, #E1D1A5 100%) !important;
	box-shadow: inset 0px -2px 0px 0px #F9F1DA !important;
	border-radius: 6px 6px 30px 6px  !important;
}


.box {
	box-shadow: 0px 4px 10px 0px rgba(186,145,86,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5), inset 0px -4px 0px 0px #6C717B, inset 0px -4px 0px 0px #F9F1DA;
	border-radius: 10px;
	border: 1px solid #000000;
	padding: 15px;
}

.title {
	color: #000000;
	font-size: 16px;
	font-weight: 600;
	margin: 10px 0;
}


.flexbw {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px 0;
}

.numbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5px 0;

	text {
		color: #000000;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		align-items: center;

		image {
			width: 20px;
			margin-right: 2px;
		}
	}
}


.zhu {
	color: rgba(0,0,0,0.5);
}

</style>
